<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: layout(~{::title}, ~{::content})}">
<head>
    <title>垃圾分类指南 - 废物回收管理系统</title>
</head>
<body>
    <div th:fragment="content">
        <!-- 页面标题和搜索栏 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="mb-0">垃圾分类指南</h2>
            <div class="d-flex gap-3">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" class="form-control" id="searchInput" placeholder="搜索垃圾名称...">
                </div>
                <div th:if="${#authorization.expression('hasRole(''ADMIN'')')}">
                    <a href="/categories/create" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>添加分类
                    </a>
                </div>
            </div>
        </div>

        <!-- 分类标签 -->
        <div class="mb-4">
            <div class="btn-group">
                <button type="button" class="btn btn-outline-success active" data-category="all">
                    <i class="fas fa-list me-2"></i>全部
                </button>
                <button type="button" class="btn btn-outline-success" data-category="recyclable">
                    <i class="fas fa-recycle me-2"></i>可回收物
                </button>
                <button type="button" class="btn btn-outline-danger" data-category="hazardous">
                    <i class="fas fa-radiation me-2"></i>有害垃圾
                </button>
                <button type="button" class="btn btn-outline-warning" data-category="kitchen">
                    <i class="fas fa-apple-alt me-2"></i>厨余垃圾
                </button>
                <button type="button" class="btn btn-outline-secondary" data-category="other">
                    <i class="fas fa-trash me-2"></i>其他垃圾
                </button>
            </div>
        </div>

        <!-- 分类列表 -->
        <div class="row" id="categoryList">
            <div th:each="category : ${categories}" th:class="'col-md-6 col-lg-4 mb-4 category-item ' + ${category.category}"
                 th:data-name="${category.name}" th:data-category="${category.category}">
                <div class="card h-100">
                    <!-- 分类图片 -->
                    <div class="position-relative">
                        <img th:if="${category.imageUrl}" th:src="${category.imageUrl}" class="card-img-top" 
                             style="height: 200px; object-fit: cover;" th:alt="${category.name}">
                        <div th:if="${!category.imageUrl}" class="card-img-top bg-light d-flex align-items-center justify-content-center"
                             style="height: 200px;">
                            <i class="fas fa-image fa-3x text-muted"></i>
                        </div>
                        <div class="position-absolute top-0 end-0 m-2">
                            <span th:class="'badge ' + ${
                                category.category == 'recyclable' ? 'bg-success' :
                                category.category == 'hazardous' ? 'bg-danger' :
                                category.category == 'kitchen' ? 'bg-warning' : 'bg-secondary'
                            }">
                                [[${
                                    category.category == 'recyclable' ? '可回收物' :
                                    category.category == 'hazardous' ? '有害垃圾' :
                                    category.category == 'kitchen' ? '厨余垃圾' : '其他垃圾'
                                }]]
                            </span>
                        </div>
                    </div>
                    
                    <div class="card-body">
                        <h5 class="card-title" th:text="${category.name}">垃圾名称</h5>
                        <p class="card-text small text-muted mb-3" th:text="${category.description}">描述</p>
                        
                        <!-- 处理方法 -->
                        <div class="mb-3">
                            <h6 class="mb-2">
                                <i class="fas fa-info-circle text-primary me-2"></i>处理方法
                            </h6>
                            <p class="card-text small" th:text="${category.disposalMethod}">处理方法说明</p>
                        </div>

                        <!-- 注意事项 -->
                        <div class="mb-3">
                            <h6 class="mb-2">
                                <i class="fas fa-exclamation-triangle text-warning me-2"></i>注意事项
                            </h6>
                            <p class="card-text small" th:text="${category.notice}">注意事项说明</p>
                        </div>

                        <!-- 示例 -->
                        <div>
                            <h6 class="mb-2">
                                <i class="fas fa-list text-success me-2"></i>常见示例
                            </h6>
                            <p class="card-text small" th:text="${category.examples}">示例列表</p>
                        </div>
                    </div>

                    <!-- 管理员操作 -->
                    <div th:if="${#authorization.expression('hasRole(''ADMIN'')')}" 
                         class="card-footer bg-transparent border-top-0">
                        <div class="d-flex justify-content-end gap-2">
                            <a th:href="@{'/categories/' + ${category.id} + '/edit'}" 
                               class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-edit me-1"></i>编辑
                            </a>
                            <button class="btn btn-sm btn-outline-danger" 
                                    th:onclick="'deleteCategory(' + ${category.id} + ')'">
                                <i class="fas fa-trash-alt me-1"></i>删除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 无数据提示 -->
        <div id="noDataTip" class="text-center py-5" style="display: none;">
            <i class="fas fa-search fa-3x text-muted mb-3"></i>
            <p class="text-muted">未找到匹配的垃圾分类信息</p>
        </div>
    </div>

    <th:block th:fragment="extraScripts">
        <script>
            // 分类筛选
            document.querySelectorAll('[data-category]').forEach(btn => {
                btn.addEventListener('click', function() {
                    // 更新按钮状态
                    document.querySelectorAll('[data-category]').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');

                    const category = this.dataset.category;
                    const keyword = document.getElementById('searchInput').value.toLowerCase();
                    filterItems(category, keyword);
                });
            });

            // 搜索功能
            let debounceTimer;
            document.getElementById('searchInput').addEventListener('input', function(e) {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    const keyword = e.target.value.toLowerCase();
                    const category = document.querySelector('[data-category].active').dataset.category;
                    filterItems(category, keyword);
                }, 300);
            });

            // 过滤显示
            function filterItems(category, keyword) {
                let hasResults = false;
                
                document.querySelectorAll('.category-item').forEach(item => {
                    const name = item.dataset.name.toLowerCase();
                    const itemCategory = item.dataset.category;
                    
                    const matchCategory = category === 'all' || category === itemCategory;
                    const matchKeyword = name.includes(keyword);
                    const shouldShow = matchCategory && matchKeyword;
                    
                    item.style.display = shouldShow ? '' : 'none';
                    if (shouldShow) hasResults = true;
                });

                document.getElementById('noDataTip').style.display = hasResults ? 'none' : 'block';
            }

            // 删除分类
            function deleteCategory(id) {
                if (!confirm('确定要删除该分类吗？此操作不可恢复！')) {
                    return;
                }

                fetch(`/categories/${id}`, {
                    method: 'DELETE'
                })
                .then(response => {
                    if (response.ok) {
                        location.reload();
                    } else {
                        return response.text().then(text => {
                            throw new Error(text);
                        });
                    }
                })
                .catch(error => alert('删除失败: ' + error.message));
            }
        </script>
    </th:block>
</body>
</html> 